<%
var title="用户操作记录";
layout("/layouts/blank.html",{title:title}){
%>
<style>
    .pre {
        height: 80px;
        overflow-y: scroll;
        padding: 8px;
    }

    .td_lable {
        font-weight: bold;
        text-align: right;
    }
</style>
<section class="content-header">
    <h1>
        ${title}
        <small>控制面板</small>
    </h1>
</section>
<section class="content">
    <div id="container">
        <table class="table table-bordered" id="tabContent" style="display: none;">
            <tbody>
            <tr>
                <td class="td_lable">摘要信息</td>
                <td style="width: 80%">{{formData.msg}}</td>
            </tr>
            <tr>
                <td class="td_lable">用户名</td>
                <td>
                    {{formData.userName}}
                </td>
            </tr>
            <tr>
                <td class="td_lable">姓名</td>
                <td>
                    {{formData.opByDesc}}
                </td>
            </tr>
            <tr>
                <td class="td_lable">部门</td>
                <td>
                    {{formData.deptDesc}}
                </td>
            </tr>
            <tr>
                <td class="td_lable">操作时间</td>
                <td>
                    {{formData.opAt}}
                </td>
            </tr>
            <tr>
                <td class="td_lable">类型</td>
                <td>{{formData.type}}</td>
            </tr>
            <tr>
                <td class="td_lable">标签</td>
                <td>{{formData.tag}}</td>
            </tr>
            <tr>
                <td class="td_lable">IP</td>
                <td>{{formData.ip}}</td>
            </tr>
            <tr>
                <td class="td_lable">浏览器</td>
                <td>{{formData.browser}}</td>
            </tr>
            <tr>
                <td class="td_lable">操作系统</td>
                <td>{{formData.os}}</td>
            </tr>
            <tr>
                <td class="td_lable">java方法</td>
                <td>{{formData.source}}</td>
            </tr>
            <tr>
                <td class="td_lable">访问方式</td>
                <td>{{formData.method}}</td>
            </tr>
            <tr>
                <td class="td_lable">访问路径</td>
                <td>{{formData.path}}</td>
            </tr>
            <tr>
                <td class="td_lable">执行耗时</td>
                <td>{{formData.consuming}}</td>
            </tr>
            <tr v-if="formData.param!=''">
                <td class="td_lable">参数</td>
                <td>
                    <pre class="pre">{{formData.param}}</pre>
                </td>
            </tr>
            <tr v-if="formData.result!=''">
                <td class="td_lable">返回结果</td>
                <td>
                    <pre class="pre">{{formData.result}}</pre>
                </td>
            </tr>
            </tbody>
        </table>
        <div style="background: #ffffff">
            <div style="height: 40px">
                <form class="searchFrom">
                    <div class="input-group">
                        <input type="text" v-model="searchData.key" class="form-control" placeholder="标签、姓名、用户名、部门名称 模糊查询">
                    </div>
                    <div class="input-group">
                        <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="handleSearchTable"
                               value="查询">
                    </div>
                </form>
            </div>
            <div id="loginLogTable" lay-filter='loginLogTable'></div>
        </div>
    </div>
</section>
<script type="text/html" id="toolBarFixed">
    <div class="layui-btn layui-btn-sm layui-btn-normal" lay-event="view">详情</div>
</script>
<script type="text/javascript">
    var listTable, vm = new Vue({
        el: '#container',
        data: {
            searchData: {
                key: ''
            },
            formData: {
                type: "",
                tag: "",
                source: "",
                path: "",
                ip: "",
                msg: "",
                method: "",
                consuming: "",
                param: "",
                result: "",
                userName: "",
                opBy: "",
                opAt: "",
                opByDesc: "",
                os: "",
                deptDesc: "",
                browser: ""
            }
        },
        methods: {
            handleView: function (data) {
                this.formData = data;
                layer.open({
                    type: 1,
                    title: "详情",
                    area: ['600px', '80%'],
                    content: $("#tabContent"),
                })
            },
            handleSearchTable: function () {
                listTable.reload({
                    where: vm.searchData,
                    page: {curr: 1}
                });
            },
            layuiInit: function () {
                layui.use('table', function () {
                    var table = layui.table; //表格
                    listTable = table.render({
                        id: 'loginLogTable',
                        elem: '#loginLogTable',
                        page: true,
                        method: 'post',
                        url: base + "/sysLogs/sysLogListData",
                        limit: 50,
                        height: 650,
                        request: {
                            pageName: 'pageNum',
                            limitName: 'pageSize',
                        },
                        where: vm.searchData,
                        cols: [[
                            {title: '序号', type: 'numbers', align: 'center'},
                            {field: 'tag', title: '标签', align: 'center', width: 120},
                            {field: 'opByDesc', title: '姓名', align: 'center', width: 120},
                            {field: 'deptDesc', title: '部门', align: 'center', width: 120},
                            {field: 'msg', title: '摘要信息', minWidth: 400},
                            {field: 'ip', title: '操作IP', align: 'center'},
                            {field: 'opAt', title: '操作时间', align: 'center'},
                            {field: 'consuming', title: '耗时', align: 'center'},
                            {title: '操作', width: 80, align: 'center', toolbar: '#toolBarFixed'},
                        ]]
                    });
                    table.on("tool(loginLogTable)", function (obj) {
                        var data = obj.data, layEvent = obj.event;
                        if (layEvent == "view") {
                            vm.handleView(data);
                        }
                    });
                });
            }
        },
        created: function () {
            this.layuiInit();
        },
        updated: function () {
        },
        mounted: function () {
        }
    });
</script>
<%}%>